<template>
  <view class="contenter">
    <view class="main">
      <view class="sreach u-flex flex_bt">
        <view class="u-flex">
          <view class="icon">
            <u-icon name="search"  color="#999999" size="30"></u-icon>
          </view>
          <view>
            <u-input :clearable="false" v-model="search" placeholder="用户姓名/电话" type="text" :border="false" :height="68" />
          </view>
        </view>
        <view class="change" @click="searchChange">搜索</view>
      </view>
      <view class="bottom flex_bt u-flex" v-for="(data,index) in userList" :key="index" @click="tabChangeIndex(data,index)" :class="{'active':index == tabIndex}">
        <view class="u-flex">
          <view>
            <item-image :type="'1'" :img="data.userimg ||data.timg" :size="112"  class="u-margin-right-8"  :fade="false"/>
          </view>
          <view class="name">
            <view class="user">{{data.nickname || data.name}}</view>
            <view class="phone">{{data.phone || ''}}</view>
            <view class="phone" v-if="data.tname">{{data.tname || ''}}</view>
          </view>
        </view>
        <view class="radio flex_j_c flex" >
          <u-icon name="checkbox-mark"  color="#ffffff" size="21"></u-icon>
        </view>
      </view>
      <view class="bton">
        <view class="bt" @click="xiadan">确认选择</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      search:'',
      tabIndex:-1,
      option:{},
      userList:[],
    }
  },
  onLoad(option){
    this.option = option
    this.setData()
  },

  methods:{
    // 确认选择人
    xiadan(){
      uni.navigateBack({
        delta: 1
      });
    },
    //用户列表
    setData(){
      if(this.option.type == 2){

        this.$api.technician({service_id:this.option.rid}).then(res => {
          this.userList = res.data
          this.userList.forEach((data,index)=>{
            if(data.id == this.option.oid) this.tabIndex = index

          })
        })
      }else {
        this.$api.userList().then(res => {
          this.userList = res.data.data
          this.userList.forEach((data,index)=>{
            if(data.id == this.option.id) this.tabIndex = index
            data.phone = this.phone(data.phone)
          })
        })
      }

    },
    //搜索
    searchChange(){},
    //选择信息
    tabChangeIndex(data,index){
      if(this.option.type == 1){
        uni.setStorage({
          key: 'userId',
          data: data.id,
        });
      }else {
        uni.setStorage({
          key: 'rid',
          data: data.id,
        });
      }

      this.tabIndex = index
    },
  }
}
</script>

<style scoped lang="scss">
.main{
  margin: 0 32rpx;
  padding-top: 30rpx;
}
  .sreach{
    background: white;
    height: 68rpx;
    border-radius: 8rpx;
    padding: 0 20rpx;
    .icon{
      margin-right: 16rpx;
    }
    .change{
      font-size: 28rpx;
      font-weight: bold;
      color: #0F4C3A;
    }
  }
.active{
  box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
  .radio{
    background: $uni-color-primary;
    border: 2rpx solid $uni-color-primary;
  }
}
    .bottom{
      padding: 0 20rpx;
      height: 160rpx;
      background: #FFFFFF;
      border-radius: 12rpx;
      margin-top: 20rpx;
      .name{
        margin-left: 40rpx;
        .user{
          font-size: 32rpx;
          font-weight: bold;
          color: #000000;
          margin-bottom: 20rpx;
        }
        .phone{
          font-size: 28rpx;
          color: #7B7B7B;
        }
      }
      .radio{
        width: 40rpx;
        height: 40rpx;
        border: 2rpx solid #E0DCDF;
        border-radius: 50%;
      }

    }
.bton{
  margin-top: 60rpx;
  .bts{
    width: 590rpx;
    height: 78rpx;
    background:white;
    border-radius: 40rpx;
    text-align: center;
    line-height: 78rpx;
    font-size: 28rpx;
    color: #45806E;
    border: 2rpx solid #45806E;
    margin-top: 40rpx;
  }
}
</style>